<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:composite="http://java.sun.com/jsf/composite">

<composite:interface>
	<composite:attribute name="updateElement" />
	<composite:attribute name="oncomplete" />
	<composite:attribute name="selectButtonRendered" default="true" />
	<composite:attribute name="returnAction"
		method-signature="void getResultColor()" />
</composite:interface>

<composite:implementation>
	<p:dataTable id="#{cc.id}" var="color" value="#{colorsMB.colors}"
		rowKey="#{color.id}" selectionMode="single"
		emptyMessage="No se han encontrado colores"
		filteredValue="#{colorsMB.colorsFiltrados}"
		rowsPerPageTemplate="5,10,15" rows="5" paginatorPosition="bottom"
		paginator="true" selection="#{colorsMB.selectedColor}">

		<p:ajax event="rowSelect" listener="#{colorsMB.rowSelected}"
			update="#{cc.attrs.id}" />
		<p:column style="width:2%">
			<p:rowToggler />
		</p:column>
		<p:column id="nombreCol" filterBy="#{color.nombre}"
			filterMatchMode="contains" headerText="Nombre">
			<h:outputText value="#{color.nombre}" />
		</p:column>
		<p:column id="creadoCol" headerText="Creado">
			<h:outputText value="#{color.created}" />
		</p:column>
		<p:rowExpansion>
			<p:panelGrid styleClass="table table-bordered table-striped">
				<p:row>
					<p:column styleClass="tableNoGrid">
						<p:panelGrid>
							<p:row>
								<p:column>
									<h:outputText style="font-weight: bold;" value="Descripción"></h:outputText>
								</p:column>
								<p:column>
									<h:outputText value="#{color.descripcion}" />
								</p:column>
							</p:row>
						</p:panelGrid>
					</p:column>
				</p:row>
			</p:panelGrid>
		</p:rowExpansion>
		<f:facet name="footer">
			<p:commandButton id="selectButton"
				rendered="#{cc.attrs.selectButtonRendered}"
				actionListener="#{cc.attrs.returnAction}" process="@this"
				value="Seleccionar" disabled="#{!colorsMB.rowSelected}"
				icon="ui-icon-arrowthick-1-n" oncomplete="#{cc.attrs.oncomplete}" />
		</f:facet>
	</p:dataTable>
</composite:implementation>

</html>